<template>
    <div class="page-container">
      <!-- 查询条件区域 -->
      <div class="search-bar">
        <el-input
          v-model="searchForm.keyword"
          placeholder="请输入单据号或客户名或备注"
          clearable
          class="search-input"
        />
        <label class="search-label">日期：</label>
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          class="date-picker"
        />
        <label class="search-label">销售人员：</label>
        <el-select
          v-model="searchForm.salesman"
          placeholder="(空)"
          clearable
          class="select-item"
        >
          <el-option label="(空)" value="" />
        </el-select>
        <label class="search-label">订单状态：</label>
        <el-select
          v-model="searchForm.orderStatus"
          placeholder="请选择"
          clearable
          class="select-item"
        >
          <el-option label="请选择" value="" />
        </el-select>
        <label class="search-label">审核状态：</label>
        <el-select
          v-model="searchForm.auditStatus"
          placeholder="(空)"
          clearable
          class="select-item"
        >
          <el-option label="(空)" value="" />
        </el-select>
        <label class="search-label">仓库：</label>
        <el-input
          v-model="searchForm.warehouse"
          placeholder="请输入"
          clearable
          class="search-input"
        />
        <label class="search-label">商品：</label>
        <el-input
          v-model="searchForm.goods"
          placeholder="请输入"
          clearable
          class="search-input"
        />
        <el-button type="primary" class="search-btn">查询</el-button>
        <el-button type="text" class="advanced-search">高级搜索</el-button>
      </div>
  
      <!-- 操作按钮区域 -->
      <div class="operation-bar" >
        <el-switch v-model="showDetail" active-text="查看明细" inactive-text="查看明细" />
        <el-button type="primary" @click="addSaleQuotation">新增</el-button>
        <el-button>按线路导出</el-button>
        <el-button>移入销售工作台</el-button>
        <el-dropdown>
          <el-button>
            审核
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <el-button>
            打印
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button>导入</el-button>
        <el-dropdown>
          <el-button>
            关闭
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <el-button>
            锁定
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button>合并出库</el-button>
        <el-button type="danger">删除</el-button>
      </div>
  
      <!-- 表格区域，设置横向滚动 -->
      <div class="table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{ backgroundColor: '#f5f7fa' }"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="operation"
            label="操作"
            width="80"
          />
          <!-- 以下是根据截图整理的表头字段 -->
          <el-table-column
            prop="orderDate"
            label="订单日期"
          />
          <el-table-column
            prop="orderNo"
            label="订单编号"
          />
          <el-table-column
            prop="relatedDeliveryNo"
            label="关联销货单号"
          />
          <el-table-column
            prop="relatedReceiptNo"
            label="关联预收款单号"
          />
          <el-table-column
            prop="relatedQuotationNo"
            label="关联报价单号"
          />
          <el-table-column
            prop="businessType"
            label="业务类别"
          />
          <el-table-column
            prop="relatedPurchaseOrderNo"
            label="关联购货订单号"
          />
          <el-table-column
            prop="salesman"
            label="销售人员"
          />
          <el-table-column
            prop="customer"
            label="客户"
          />
          <el-table-column
            prop="customerType"
            label="客户类别"
          />
          <el-table-column
            prop="salesAmount"
            label="销售金额"
          />
          <el-table-column
            prop="taxAmount"
            label="税额"
          />
          <el-table-column
            prop="preferentialAmount"
            label="优惠金额"
          />
          <el-table-column
            prop="preferentialAfterAmount"
            label="优惠后金额"
          />
          <el-table-column
            prop="quantity"
            label="数量"
          />
          <el-table-column
            prop="orderStatus"
            label="订单状态"
          />
          <el-table-column
            prop="advanceReceiptStatus"
            label="预收状态"
          />
          <el-table-column
            prop="totalAdvanceReceiptAmount"
            label="累计预收金额"
          />
          <el-table-column
            prop="deliveryDate"
            label="交货日期"
          />
          <el-table-column
            prop="biller"
            label="制单人"
          />
          <el-table-column
            prop="billTime"
            label="制单时间"
          />
          <el-table-column
            prop="auditor"
            label="审核人"
          />
          <el-table-column
            prop="remark"
            label="备注"
          />
          <el-table-column
            prop="deliveryMethod"
            label="交货方式"
          />
          <el-table-column
            prop="logisticsCompany"
            label="物流公司"
          />
          <el-table-column
            prop="collectionCondition"
            label="收款条件"
          />
          <el-table-column
            prop="relatedRoute"
            label="关联线路"
          />
          <el-table-column
            prop="printCount"
            label="打印次数"
          />
          <el-table-column
            prop="weight"
            label="重量"
          />
        </el-table>
      </div>
  
      <!-- 分页区域 -->
      <div class="pagination-bar">
        <span class="total-count">共 {{ total }} 条</span>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          class="pagination"
        />
        <el-select
          v-model="pageSize"
          placeholder="条/页"
          class="page-size-select"
        >
          <el-option
            v-for="size in pageSizes"
            :key="size"
            :label="size"
            :value="size"
          />
        </el-select>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const addSaleQuotation = () => {
    router.push({ name: 'saleOrders' });
  }
  // 定义响应式数据
  const searchForm = ref({
    keyword: '',
    dateRange: [],
    salesman: '',
    orderStatus: '',
    auditStatus: '',
    warehouse: '',
    goods: ''
  })
  const tableData = ref([])
  const showDetail = ref(false)
  const total = ref(1) // 模拟数据，实际根据接口返回
  const pageSize = ref(100)
  const pageSizes = ref([100, 200, 500])
  </script>
  
  <style scoped>
  /* 页面容器样式 */
  .page-container {
    padding: 10px;
    height: 800px;
  }
  
  /* 搜索栏样式：让查询条件在一行显示，超出可横向滚动 */
  .search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    /* 新增：设置不换行，超出出现横向滚动条 */
    flex-wrap: nowrap; 
    overflow-x: auto;
    /* 可根据需要调整滚动条样式，让外观更统一 */
    scrollbar-width: thin;
  }
  /* 隐藏滚动条（可选，若想让滚动条不显示，仅用于webkit内核浏览器） */
  .search-bar::-webkit-scrollbar {
    display: none;
  }
  .search-label {
    margin-right: 5px;
    font-size: 12px;
    /* 避免label挤压，可根据需要调整最小宽度 */
    min-width: 60px; 
  }
  .search-input {
    width: 160px; /* 适当缩小宽度，适配一行布局 */
  }
  .date-picker {
    width: 220px; /* 适当缩小宽度，适配一行布局 */
  }
  .select-item {
    width: 120px; /* 适当缩小宽度，适配一行布局 */
  }
  .search-btn {
    margin-left: 10px;
  }
  .advanced-search {
    margin-left: 5px;
  }
  
  /* 操作栏样式 */
  .operation-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
  }
  
  /* 表格容器样式，设置横向滚动 */
  .table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 10px;
  }
  .custom-table {
    min-width: 2800px; /* 保证表头不挤在一起，可根据实际调整 */
  }
  
  /* 分页栏样式 */
  .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  .total-count {
    color: #666;
  }
  .page-size-select {
    width: 80px;
  }
  </style>